<template>
	<view>

		<view class="title">
			<view class="title1">
				<image src="/static/farm/order_licon.png"></image>
			</view>
			<view class="title2">
				{{order_user.bumen}}({{order_user.realname}})
			</view>
		</view>
		<view class="goodsList">
			<view style="height: 18rpx;width: 100%;"></view>
			<view class="goodsInfo" v-for="(item,index) in cai_list" :key="index"  v-show="!item.show">
				<view class="imageInfo">
					<image :src="baseurl+item.image" mode="aspectFit"></image>
				</view>
				<view class="infoCenter">
					<view class="infoCenterName">
						{{item.cai_name}}
					</view>
					<view class="infoCenterType">
						{{item.unit_name}} x {{item.nums}}
					</view>
				</view>
				<view class="infoRight">
					
					<!-- 配送 -->
					<view class="" v-if="order.status == 3">
						<view class="but" v-if="item.deliverydata == 0" @click="peisong(index)">
							配送
						</view>
						<!-- 未配送 -->
						<view class="butOn" v-if="item.deliverydata == 1">
						    已配送
						</view>
					</view>
				</view>
			</view>

			<view class="line"></view>
			<view class="" v-if="cai_list.length > 10" >
				<view class="but" v-if="ifshow == 1"   @click="cai_listzk(true)">
					展开（共{{cai_list.length}}件）
					<u-icon name="arrow-down" color="#FF641F" size="28"></u-icon>
				</view>
				<view class="but" v-if="ifshow == 2"  @click="cai_listzk(false)">
					收起（共{{cai_list.length}}件）
					<u-icon name="arrow-up" color="#FF641F" size="28"></u-icon>
				</view>
			</view>

		</view>
	</view>
</template>
<style lang="scss" scoped>
.goodsList{
	
	.but{color: #FF641F;font-size: 26rpx;
		height: 100rpx;background: #FFF;line-height: 100rpx;text-align: center;
	}
	.line{margin-left: 40rpx;margin-right: 40rpx;
		border-bottom: #B5B5B5 dashed 2rpx;
	}
	.goodsInfo{
		height: 150rpx;margin-left: 40rpx;margin-right: 40rpx;display: flex;
		.imageInfo{
			image{
				width: 126rpx;height: 100rpx;margin-top: 10rpx;
				border-radius: 10rpx;
			}
		}
		.infoCenter{
			flex: 1;margin-left: 20rpx;
			.infoCenterName{margin-top: 18rpx;
				color: #333333;font-size: 30rpx;
			}
			.infoCenterType{
				color: #999999;font-size: 22rpx;
			}
		}
		.infoRight{
			width: auto;
			.but{
				color: #FFF;
				text-align: center;
				line-height: 48rpx;
				margin-top: 36rpx;
				height: 48rpx;background: #5EAFF4;border-radius: 4px;
				padding: 0 20rpx;
			}
			.butOn{color: #FFF;text-align: center;line-height: 48rpx;margin-top: 36rpx;
			    padding: 0 20rpx;
				height: 48rpx;background: #D2D2D2;border-radius: 4px;
			}
		}
	}
}
.title{
	height: 100rpx;background: #FFF;margin-top: 0rpx;display: flex; border-bottom: #B5B5B5 dashed 2rpx;
	.title1{
		image{
			width: 40rpx;height: 40rpx;margin-left: 70rpx;margin-top: 30rpx;
		}
	}
	.title2{
		line-height: 100rpx;padding-left: 20rpx;color: #5EAFF4;font-size: 32rpx;
	}
}
.top{
	height: 100rpx;display: flex;background: #FFF;text-align: center;line-height: 100rpx;color: #333333;font-size: 30rpx;
	.top1{
		flex: 1;border-bottom: #5EAFF4 solid 5rpx;color: #5EAFF4;
	}
	.top2{
		flex: 1;
	}
}	
page {
	background-color: #fff;
}
</style>
<script>
	export default {
		data() {
			return {
			   order_user:"",//用户
			   cai_list:"",//菜品列表
			   order:"", //订单
			   order_id:0,
			   baseurl:"",
			   ifshow:1, //1展开 2收起
			}
		},
		onLoad(options){
			this.baseurl = this.$u.http.config.baseUrl
			this.order_id = options.order_id
			this.nmOrderDateil();
		},
		methods: {
			 //
             nmOrderDateil(){
				let form = {
						order_id:this.order_id
				};
				this.$u.post('api/farm/nmOrderDateil', form).then(res => {
					this.order_user = res.order_user
					this.order = res.order
					this.$nextTick(() => {
						this.cai_list = res.cai_list
						this.cai_listzk(false);
					})
				})
			 },
			 //展开收起
			 cai_listzk(flag){
				 this.cai_list.map((item,index)=>{
					 if(index > 9){
						 item.show = flag
					 }
				 })
				 this.$forceUpdate();
			 },
			 //配送
			 peisong(index){
				 let item = this.cai_list[index]
				 let form = {
				 	 ordercai_id: item.caiorder_id,
					 order_id: this.order_id
				 }
				 this.$u.post('api/farm/orderCaiPeisong', form).then(res => {
				 		this.$u.toast('成功');
						item.deliverydata = 1
				 })
			 }
		}
	}
</script>
